<template>
	<!-- 税收完税证明查询页面 -->
	<view class="sswszm">
		<view class="title">
			<text>税收完税证明</text>
		</view>
		<view class="wszmform">
			<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
				<uni-forms-item name="kjrqq" required label="缴款日期" label-width="210rpx">
					<view class="jkrqxz">
						<view class="jksjxz">
							<picker mode="date" :value="formData.kjrqq" :start="startDate" :end="endDate"
								@change="kjrqqChange" class="sjxz">
								<view class="uni-input">{{formData.kjrqq}}</view>
							</picker>
							<view>-</view>
							<picker mode="date" :value="formData.kjrqz" :start="startDate" :end="endDate"
								@change="kjrqzChange" class="sjxz">
								<view class="uni-input">{{formData.kjrqz}}</view>
							</picker>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item name="address" label="房源地址" label-width="210rpx">
					<input type="text" v-model="formData.address" class="uni-input-border" placeholder="请输入房源地址" />
				</uni-forms-item>
				<uni-forms-item name="address" label="完税证明编号" label-width="210rpx">
					<input type="text" v-model="formData.wspzbh" class="uni-input-border" placeholder="请输入完税证明编号" />
				</uni-forms-item>
				<view class="btn">
					<button type="primary" class="qrbtn" @click="submitForm('form')" size="mini">查询</button>
					<button type="default" plain="true" @click="goBack()" size="mini">返回</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					wspzbh: "",
					address: "",
					kjrqq: "缴款日期起",
					kjrqz: "缴款日期止",
				},
				rules: {

				},
				startDate: "2000-01-01",
				endDate: "2099-12-31",
			}
		},
		methods: {
			submitForm(form) {
				console.log(this.formData)
				if (this.formData.kjrqq == "缴款日期起" || this.formData.kjrqz == "缴款日期止") {
					uni.showToast({
						title: '请选择缴款日期',
						icon: 'error'
					})
					return
				}
				this.$commonCzwjs.goPage({
					url: "/pages/sswszm/sswszm?wzmcxForm=" + JSON.stringify(this.formData) + '&type=wszmcx'
				})
				this.resetForm()
			},
			//重置表单 
			resetForm() {
				this.formData = {
					wspzbh: "",
					address: "",
					kjrqq: "缴款日期起",
					kjrqz: "缴款日期止",
				}
			},
			// 返回
			goBack() {
				this.$commonCzwjs.goPage({
					url: "/pages/sswszm/sswszm"
				})
			},
			// 缴款日期起修改
			kjrqqChange: function(e) {
				this.formData.kjrqq = e.detail.value
			},
			// 缴款日期止修改
			kjrqzChange: function(e) {
				this.formData.kjrqz = e.detail.value
			},
		}
	}
</script>

<style>
	.sswszm {
		background: #ffffff;
		height: 1334rpx;
		color: black;
	}

	.title {
		width: 100%;
		height: 80rpx;
		background: #3171d5;
		text-align: center;
		line-height: 80rpx;
		color: white;
	}



	.wszmform {
		padding: 40rpx 10rpx 0 10rpx;
	}

	::v-deep .uni-forms-item__label {
		justify-content: flex-end !important
	}

	.jkrqxz {}

	.jksjxz {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.sjxz {
		padding: 10rpx 40rpx;
		width: 160rpx;
		border: 1px #e5e5e5 solid;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.uni-input {
		color: gray;
	}

	.uni-input-input {
		font-size: 28rpx;
	}

	.uni-input-border {
		padding: 0 20rpx;
		height: 70rpx;
		width: 100%;
		font-size: 24rpx;
		color: #666;
		border: 2rpx #e5e5e5 solid;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.uni-input-placeholder {
		font-size: 28rpx;
	}

	.btn {
		display: flex;
	}

	.btn .qrbtn {
		background-color: #3171d5;
	}

	.btn uni-button {
		width: 590rpx;
		height: 70rpx;
		line-height: 70rpx;
	}

	.btn uni-button:nth-of-type(1) {
		margin-right: 10rpx;
	}

	.btn uni-button:nth-of-type(2) {
		margin-left: 10rpx;
	}
</style>